<template>
    <div class="list-wrap">
        <ul>
            <li>
                <div class="goods">
                    <div class="img-wrap">
                        <img src="../../../assets/goods/goods_1.jpg" alt="">
                    </div>
                    <div class="small-img">
                        <img src="../../../assets/goods/goods_1.jpg" alt="">
                    </div> 
                    <p class="goodsName">Montclair 单人床</p>
                    <p class="goodPrice-wrap">￥<span class="goodsPrice">1220</span></p>
                </div>
            </li>
            <li>
                <div class="goods">
                    <div class="img-wrap">
                        <img src="../../../assets/goods/goods_1.jpg" alt="">
                    </div>
                    <div class="small-img">
                        <img src="../../../assets/goods/goods_1.jpg" alt="">
                    </div> 
                    <p class="goodsName">Montclair 单人床</p>
                    <p class="goodPrice-wrap">￥<span class="goodsPrice">1220</span></p>
                </div>
            </li>
             <li>
                <div class="goods">
                    <div class="img-wrap">
                        <img src="../../../assets/goods/goods_1.jpg" alt="">
                    </div>
                    <div class="small-img">
                        <img src="../../../assets/goods/goods_1.jpg" alt="">
                    </div> 
                    <p class="goodsName">Montclair 单人床</p>
                    <p class="goodPrice-wrap">￥<span class="goodsPrice">1220</span></p>
                </div>
            </li>
             <li>
                <div class="goods">
                    <div class="img-wrap">
                        <img src="../../../assets/goods/goods_1.jpg" alt="">
                    </div>
                    <div class="small-img">
                        <img src="../../../assets/goods/goods_1.jpg" alt="">
                    </div> 
                    <p class="goodsName">Montclair 单人床</p>
                    <p class="goodPrice-wrap">￥<span class="goodsPrice">1220</span></p>
                </div>
            </li>
            <li>
                <div class="goods">
                    <div class="img-wrap">
                        <img src="../../../assets/goods/goods_1.jpg" alt="">
                    </div>
                    <div class="small-img">
                        <img src="../../../assets/goods/goods_1.jpg" alt="">
                    </div> 
                    <p class="goodsName">Montclair 单人床</p>
                    <p class="goodPrice-wrap">￥<span class="goodsPrice">1220</span></p>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
export default{
    name:'GoodList'
}
</script>

<style lang='less'>
    .list-wrap{
        width: 960px;
       

        & >ul{
            width: 980px;
            display: flex;
            justify-content: left;
            flex-wrap: wrap;

            li{
                
                .goods{
                    width: 222px;
                    height: 332px;
                    margin: 0 0 20px 20px;
                    font-size:16px;
                    
                    >.img-wrap{
                        border: 1px solid #d1d3d4;
                        
                        >img{
                            width: 220px;
                            height: 220px;
                        }
                    }
                    
                    .small-img{
                        border: 1px solid black;
                        width: 30px;
                        height: 30px;
                        margin-top:8px;
                        >img{
                                width: 30px;
                                height: 30px;
                        }
                    }    
                    .goodsName{
                        margin:5px 0;
                        color:#808285
                    }
                    
                }
            }
        }

    }
</style>
